import React, { useState } from 'react';
import './index.css';
import { InputNumber } from 'antd';

const PointInput = props => {

    const [pointValue, setPointValue] = useState({
        x: 0.00,
        y: 0.00,
        z: 0.00
    });

    const changeData = val => {
        if(props.onChange){
            props.onChange({...val});
        }
    }

    return (
        <span>
            <span>
                <span>X:</span>
                <InputNumber type="number" onChange={val => {
                    changeData({ ...pointValue, x: val })
                    setPointValue({ ...pointValue, x: val });
                }} style={{ width: '80px' }}/>
            </span>
            <span>
                <span>Y:</span>
                <InputNumber type="number" onChange={val => {
                    changeData({ ...pointValue, y: val })
                    setPointValue({ ...pointValue, y: val });
                }} style={{ width: '80px' }}/>
            </span>
            <span>
                <span>Z:</span>
                <InputNumber type="number" onChange={val => {
                    changeData({ ...pointValue, z: val })
                    setPointValue({ ...pointValue, z: val });
                }} style={{ width: '80px' }}/>
            </span>
        </span>
    );
}

export default PointInput;